<template>
    <div>
        <div class="content">
            <scroller class="list">
                <div class="list-in">
                    <div v-for="item in dataList" class="panel" @click="jump('/learning-detail/'+item.id)" >
                        <image style="width:332px; height:248px;" :src="item.imagePath"></image>
                        <text class="text">{{item.title}}</text>
                        <text class="time">{{item.createAt}}</text>
                    </div>
                </div>
                <loading class="loading" @loading="onloading" :display="showLoading">
                    <text class="indicator">Loading ...</text>
                </loading>
            </scroller>
        </div>
        <AppHeader :title="headerTitle" :showBack=true></AppHeader>
    </div>
</template>
<style scoped>
    .content{
        background-color: #f2f2f2;
        padding-left: 30px;
        padding-top: 20px;
        margin-top: 88px;
        height: 1246px;
        padding-bottom: 100px;
    }
    .list-in{
        flex-direction: row;
        flex-wrap:wrap;
        align-content: flex-start;
    }
    .panel{
        margin-bottom: 20px;
        background-color: #ffffff;
        width: 332px;
        box-shadow: 0 0 3px #888888;
        border-radius: 6px;
        height: 404px;
        margin-right: 26px;
    }
    .text{
        font-size: 26px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 28px;
        height: 66px;
        line-height: 36px;
    }

    .time{
        font-size: 22px;
        color: #bbbbbb;
        margin-left: 22px;
    }
</style>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'
    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data() {
            return {
                headerTitle:"学习微课",
                dataList:[],
                showLoading:"hide"
            }
        },
        created(){
            let self=this;
            self.getPageData();
        },
        methods: {
            onloading (event) {
                this.showLoading = 'show';
                let self=this;

                self.request({
                    url:"/data/weikeList-more.json"
                }).then(res=>{
                    if(res.status==1){
                        self.dataList = self.dataList.concat(res.data.dataList);
                        this.showLoading = 'hide'
                    }
                });
            },
            getPageData(){
                let self=this;
                self.request({
                    url:"/findVideoLearnList",
                    type:"post",
                    }).then(res=>{
                        console.log(res);
                        if(res.status==1){
                            self.dataList = res.data.dataList;
                        }
                });
            }
        }
    }
</script>

